<template>
  <div v-if="modelValue  && preview" >
    <el-image v-if="typeof modelValue == 'string'" :src="modelValue" fit="cover" class="w-[100px] h-[100px] rounded border"></el-image>
    <div v-else class="flex flex-wrap">
      <div class="relative mx-1 mb-2 w-[100px] h-[100px]" v-for="(url, index) in modelValue" :key="index">
        <el-icon class="absolute right-[5px] top-[5px] cursor-pointer bg-white rounded-full" style="z-index: 10" @click="removeImage(url)"><CircleClose /></el-icon>
        <el-image :src="url" fit="cover" class="w-[100px] h-[100px] rounded border"></el-image>
      </div>
    </div>
  </div>
   

  <div v-if="preview" class="choose-image-btn" @click="handleImage">
    <el-icon :size="25" class="text-gray-500"><Plus /></el-icon>
  </div>
  <el-dialog title="選擇圖片" v-model="dialogValue" width="80%" top="5vh">
    <el-container class="bg-white rounded" style="height: 70vh">
      <el-header class="image-header">
        <el-button type="primary" size="small" @click="handleOpenCreate"
          >新增分類</el-button
        >
        <el-button type="warning" size="small" @click="handleOpenUpload"
          >上傳圖片</el-button
        >
      </el-header>
      <el-container>
        <ImageAside ref="imageAsideRef" @change="handleAsideChange" />
        <ImageMain ref="ImageMainRef" @choose="handleChoose" openChoose :limit="limit" />
      </el-container>
    </el-container>

    <template #footer>
      <span>
        <el-button @click="submit">確定</el-button>
        <el-button @click="close">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import ImageAside from "~/components/ImageAside.vue";
import ImageMain from "~/components/ImageMain.vue";
import { toast } from "~/composables/util";

 const callbackFunction=ref(null)


const imageAsideRef = ref(null);
const ImageMainRef = ref(null);
const handleOpenCreate = () => {
  imageAsideRef.value.handleCreate();
};

const handleAsideChange = (id) => {
  return ImageMainRef.value.loadData(id);
};
//上传图片
const handleOpenUpload = () => ImageMainRef.value.openUploadFile();
const dialogValue = ref(false);

const handleImage = (callback=null) => {
  callbackFunction.value=callback
  dialogValue.value = true
};

const close = () => (dialogValue.value = false);
const props = defineProps({
  modelValue: [String, Array],
  limit:{
    type:Number,
    default:1
  },
    preview:{
        type:Boolean,
        default:true
    }
});

const emit = defineEmits(["update:modelValue", "urls"]);

let url = [];
const handleChoose = (e) => {
  url = e.map((o) => o.img_url);
};

const submit = () => {
  let value=[]
  if(props.limit==1){
    value=url[0]
  }else{
    value=props.preview ? [...props.modelValue,...url] :[...url]
    if(value.length>props.limit){
      let limit=props.preview ?(props.limit-props.modelValue.length) : props.limit
      return toast('最多还能選擇'+limit+'張')
    }
  }
  if (value && props.preview) {
    emit("update:modelValue", value);
  }
  if(!props.preview && typeof callbackFunction.value =='function'){
     callbackFunction.value(value)
  }
  close();
};
const removeImage = (url) =>
  emit(
    "update:modelValue",
    props.modelValue.filter((u) => u != url)
  );

  defineExpose({
    handleImage
})
</script>

<style>
.choose-image-btn {
  @apply w-[100px] h-[100px] rounded border flex justify-center items-center
  cursor: pointer hover:(bg-gray-100);
}
.image-header {
  border-bottom: 1px solid #eee;
  @apply flex items-center;
}
</style>
